<template>
  <view class="header">
    <scroll-view scroll-x class="header-nav">
      <view
        :class="index == TabCur ? 'active-color' : ''"
        v-for="(item, index) in navData"
        :key="index"
        @tap="tabSelect"
        :data-id="index"
        >{{ item }}</view
      >
    </scroll-view>
    <!-- 商业贷款 -->
    <view v-if="TabCur == 0">
      <form>
        <view class="cu-form-group margin-top" style="border-bottom: 1rpx solid #eee">
          <view class="title">计算方式</view>
          <picker @change="PickerChange" :value="index" :range="loanData">
            <view class="picker">{{ loanData[index] }}</view>
          </picker>
        </view>
        <view class="cu-form-group" style="border-bottom: 1rpx solid #eee">
          <view class="title">商贷金额</view>
          <input
            v-model="commercialLoanAmount"
            name="input"
            type="number"
            class="text-right"
          />
          <view>万</view>
        </view>
        <view class="cu-form-group" style="border-bottom: 1rpx solid #eee">
          <view class="title">商贷年限</view>
          <picker @change="yearChange" :value="index" :range="years">
            <view class="picker">{{ years[yearIndex] }}年</view>
          </picker>
        </view>

        <view class="cu-form-group" style="border-bottom: 1rpx solid #eee">
          <view class="title">利率方式</view>
          <picker @change="rateChange" :value="index" :range="rateMode">
            <view class="picker">{{ rateMode[rateIndex] }}</view>
          </picker>
        </view>
        <view class="cu-form-group" style="border-bottom: 1rpx solid #eee">
          <view class="title">LPR</view>
          <input name="input" class="text-right" type="number" v-model="lpr" />
          <text class="">%</text>
        </view>
        <view class="cu-form-group" v-if="rateIndex == 0" style="border-bottom: 1rpx solid #eee">
          <view class="title">基点</view>
          <input
            v-model="basisPoint"
            name="input"
            type="number"
            class="text-right"
          />
          <text class="">‰</text>
        </view>
        <view class="cu-form-group" style="border-bottom: 1rpx solid #eee">
          <view class="title">商贷利率</view>
          <input
            placeholder=""
            name="input"
            type="number"
            class="text-right"
            v-model="commercialLoanRate"
          />
          <text class="">%</text>
        </view>
      </form>
    </view>
    <!-- 公积金贷款 -->
    <view v-if="TabCur == 1">
      <form>
        <view class="cu-form-group margin-top" style="border-bottom: 1rpx solid #eee">
          <view class="title">计算方式</view>
          <picker @change="PickerChange" :value="index" :range="loanData">
            <view class="picker">{{ loanData[index] }}</view>
          </picker>
        </view>

        <view class="cu-form-group" style="border-bottom: 1rpx solid #eee">
          <view class="title">公积金金额</view>
          <input
            v-model="reserveAmount"
            type="number"
            name="input"
            class="text-right"
          />
          <text>万</text>
        </view>
        <view class="cu-form-group" style="border-bottom: 1rpx solid #eee">
          <view class="title">公积金年限</view>
          <picker @change="yearChange" :value="index" :range="years">
            <view class="picker">{{ years[yearIndex] }}</view>
          </picker>
        </view>
        <view class="cu-form-group" style="border-bottom: 1rpx solid #eee">
          <view class="title">公积金利率</view>
          <picker @change="reserveChange" :value="index" :range="reserveData">
            <view class="picker">{{ reserveData[reserveIndex] }}</view>
          </picker>
        </view>
      </form>
    </view>
    <!-- 组合贷款 -->
    <view v-if="TabCur == 2">
      <form>
        <view class="cu-form-group margin-top" style="border-bottom: 1rpx solid #eee">
          <view class="title">计算方式</view>
          <picker @change="PickerChange" :value="index" :range="loanData">
            <view class="picker">{{ loanData[index] }}</view>
          </picker>
        </view>
        <!-- 	<view class="cu-form-group">
					<view class="title">贷款总金额</view>
					<input v-model="commercialLoanAmount" type="number" name="input" class="text-right" />
					<text>万</text>
				</view> -->

        <view class="cu-form-group" style="border-bottom: 1rpx solid #eee">
          <view class="title">商贷金额</view>
          <input
            v-model="commercialLoanAmount"
            type="number"
            name="input"
            class="text-right"
          />
          <text>万</text>
        </view>

        <view class="cu-form-group" style="border-bottom: 1rpx solid #eee">
          <view class="title">利率方式</view>
          <picker @change="rateChange" :value="index" :range="rateMode">
            <view class="picker">{{ rateMode[rateIndex] }}</view>
          </picker>
        </view>
        <view class="cu-form-group" style="border-bottom: 1rpx solid #eee">
          <view class="title">LPR</view>
          <input name="input" class="text-right" type="number" v-model="lpr" />
          <text class="">%</text>
        </view>
        <view class="cu-form-group" v-if="rateIndex == 0" style="border-bottom: 1rpx solid #eee">
          <view class="title">基点</view>
          <input
            name="input"
            v-model="basisPoint"
            type="number"
            class="text-right"
          />
          <text class="">‰</text>
        </view>
        <view class="cu-form-group" style="border-bottom: 1rpx solid #eee">
          <view class="title">商贷利率</view>
          <input v-model="lpr" name="input" type="number" class="text-right" />
          <text class="">%</text>
        </view>
        <view class="cu-form-group" style="border-bottom: 1rpx solid #eee">
          <view class="title">商贷年限</view>
          <picker @change="sdZhPickerChange" :value="index" :range="years">
            <view class="picker">{{ years[sdYearIndex] }}年</view>
          </picker>
        </view>
        <view
          class=""
          style="height: 20upx; width: 100%; background-color: #eeeeee"
        ></view>

        <view class="cu-form-group" style="border-bottom: 1rpx solid #eee">
          <view class="title">公积金金额</view>
          <input
            v-model="reserveAmount"
            name="input"
            type="number"
            class="text-right"
          />
          <text>万</text>
        </view>
        <view class="cu-form-group" style="border-bottom: 1rpx solid #eee">
          <view class="title">公积金年限</view>
          <picker @change="gjjZhPickerChange" :value="index" :range="years">
            <view class="picker">{{ years[gjjYearIndex] }}年</view>
          </picker>
        </view>
        <view class="cu-form-group" style="border-bottom: 1rpx solid #eee">
          <view class="title">公积金利率</view>
          <picker @change="reserveChange" :value="index" :range="reserveData">
            <view class="picker">{{ reserveData[reserveIndex] }}</view>
          </picker>
        </view>
      </form>
    </view>
    <button
      style="
        width: 90%;
        margin: 0 auto;
        margin-top: 20rpx;
        background-color: #3745eb;
        color:#f5f5f5;
      "
      @click="calculate"
    >
      开始计算
    </button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loanData: ["按贷款总额", "按房屋总价"],
      years: [
        30,
        29,
        28,
        27,
        26,
        25,
        24,
        23,
        22,
        21,
        20,
        19,
        18,
        17,
        16,
        15,
        14,
        13,
        12,
        11,
        10,
        9,
        8,
        7,
        6,
        5,
        4,
        3,
        2,
        1,
      ],
      TabCur: 0,
      navData: ["商业贷款", "公积金贷款", "组合贷款"],
      // navData: ['商业贷款', '公积金贷款'],
      index: 0,
      rateMode: ["按最新LPR", "按旧版基准利率"],
      rateIndex: 0, //利率类型索引
      yearIndex: 0, //贷款年限索引
      loanIndex: 0, //贷款价格类型索引
      lpr: 4.75, //贷款利率
      reserveData: ["最新基准利率(3.25%)", "最新基准利率上浮10%(3.575%)"],
      reserve: 3.25, //公积金利率
      reserveAmount: 0, //公积金金额
      commercialLoanAmount: 0, //商业贷款金额
      reserveIndex: 0, //公积金利率索引
      basisPoint: 0, //基点
      sdYearIndex: 0, //组合商贷年限index
      gjjYearIndex: 0, //组合公积金年限index
    };
  },
  computed: {
    commercialLoanRate() {
      if (this.rateIndex == 1) {
        return this.lpr;
      } else {
        return this.lpr + this.basisPoint / 100;
      }
    },
  },
  methods: {
    tabSelect(e) {
      this.TabCur = e.currentTarget.dataset.id;
    },
    PickerChange(e) {
      this.index = e.detail.value;
    },
    sdZhPickerChange(e) {
      this.sdYearIndex = e.detail.value;
    },
    gjjZhPickerChange(e) {
      this.gjjYearIndex = e.detail.value;
    },
    yearChange(e) {
      this.yearIndex = e.detail.value;
    },
    reserveChange(e) {
      this.reserveIndex = e.detail.value;
    },
    rateChange(e) {
      this.rateIndex = e.detail.value;
      if (this.rateIndex == 1) {
        this.lpr = 4.9;
      } else {
        this.lpr = 4.75;
      }
    },

    calculate() {
      if (this.TabCur == 0) {
        if (this.commercialLoanAmount <= 0) {
          uni.showToast({
            icon: "none",
            title: "必须输入贷款金额",
          });
          return;
        }
        let datas = {
          money: this.commercialLoanAmount,
          year: this.years[this.yearIndex],
          lilv: this.commercialLoanRate / 100,
        };
        uni.navigateTo({
          url:
            "/pages/calculator/result?title=商业贷款&datas=" +
            JSON.stringify(datas),
        });
      }
      if (this.TabCur == 1) {
        if (this.reserveAmount <= 0) {
          uni.showToast({
            icon: "none",
            title: "必须输入贷款金额",
          });
          return;
        }
        if (this.reserveIndex == 0) {
          this.reserve = 3.25;
        } else {
          this.reserve = 3.575;
        }
        if (this.reserveAmount > 70) {
          uni.showToast({
            icon: "none",
            title: "公积金贷款总额度不超过70万",
          });
          this.reserveAmount = 70;
          return;
        }
        let datas = {
          money: this.reserveAmount,
          year: this.years[this.yearIndex],
          lilv: this.reserve / 100,
        };

        uni.navigateTo({
          url:
            "/pages/calculator/result?title=公积金贷款&datas=" +
            JSON.stringify(datas),
        });
      }
      if (this.TabCur == 2) {
        // sdnum, gjjnum, sdyear, gjjyear, sdlilv, gjjlilv
        if (this.reserveIndex == 0) {
          this.reserve = 3.25;
        } else {
          this.reserve = 3.575;
        }
        if (this.reserveAmount > 70) {
          uni.showToast({
            icon: "none",
            title: "公积金贷款总额度不超过70万",
          });
          this.reserveAmount = 70;
          return;
        }

        if (this.reserveAmount + this.commercialLoanAmount <= 0) {
          uni.showToast({
            icon: "none",
            title: "必须输入贷款金额",
          });
          return;
        }

        let datas = {
          sdmoney: this.commercialLoanAmount,
          sdyear: this.years[this.sdYearIndex],
          sdlilv: this.commercialLoanRate / 100,
          gjjmoney: this.reserveAmount,
          gjjyear: this.years[this.gjjYearIndex],
          gjjlilv: this.reserve / 100,
        };
        uni.navigateTo({
          url:
            "/pages/calculator/result?title=组合贷款&datas=" +
            JSON.stringify(datas),
        });
      }
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #ffffff;
  .title {
    width: 30%;
  }
  .cu-form-group {
    input {
      padding-right: 40upx;
    }
    .picker {
      padding-right: 40upx;
    }
  }
}
.active-color {
  color: #3745eb;
}
.header {
  padding: 10rpx 10rpx;
}
.header-nav {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
}

.header-nav >view{
  padding:20rpx 0 ;
}

.cu-form-group {
	background-color: #ffffff;
	padding: 1rpx 30rpx;
	display: flex;
	align-items: center;
	min-height: 100rpx;
	justify-content: space-between;
}

.cu-form-group.align-start .title {
	height: 1rpx;
	margin-top: 32rpx;
	line-height: 1rpx;
}

.text-right {
	text-align: right;
}
.margin-top {
  margin-top:30rpx
}
</style>
